﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>华南人资系统</title>
    <link rel="stylesheet" href="~/layui/css/layui.css">
</head>
<body>
 <style type="text/css">
    #dept_main, #dept_particulars{
        width: 48.5%;
        display: inline-block;
        vertical-align: top;
        padding: 20px;
        background: white;
        box-sizing: border-box;
    }
    #dept_tree{
        margin-top: 20px;
    }
</style>
 
<div id="dept_main" style="margin-right: 2%;">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>组织架构</legend>
    </fieldset>
    <button id="addDept" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" lay-demo="addDept"><i class="layui-icon">&#xe654;</i>添加部门</button>
    @*<button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" lay-demo="gain">获取选中节点</button>*@
    <div id="dept_tree">

    </div>
    <div id="test1"></div>
</div>
<div id="dept_particulars">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>组织部门详情</legend>
    </fieldset>
    <div id="dept_home">
        <div class="layui-tree-emptyText">无数据</div>
    </div>
</div>

    <script src="~/layui/layui.js"></script>
    <script>
        layui.use(['tree', 'util'], function () {
            var tree = layui.tree;
            var util = layui.util;

            //渲染
            var inst1 = tree.render({
                elem: '#test1',  //绑定元素
                data: getMenuData(),
                id: 'treeId',
                showCheckbox: false,     //是否显示复选框
                click: function (obj) {
                    var OrgName = obj.data.title;
                $("#dept_home").load("../home/OrgInfo?OrgName=" + OrgName);
                }
            });
        });

        function getMenuData() {
            var data = [];
            $.ajax({
                url: "/TreeData/GetOrgTreeData",    //后台数据请求地址
                type: "post",
                async: false,
                success: function (resut) {
                    data = resut;
                }
            });
            return data;
        }
    </script>
</body>
</html>
